<template>
  <div class="resetpsw-wrap">
    <div class="loginbyphone-content-wrap">
      <div class="title">{{ $t('重置密码') }}</div>
      <el-form
        :model="formData"
        ref="formData"
        label-width="0"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <p class="email">{{ $t('新密码') }}</p>
        <el-form-item
          prop="password"
          :rules="[{ required: true, message: $t('密码不能为空') }]"
        >
          <el-input
            :placeholder="$t('请输入密码')"
            type="password"
            v-model="formData.password"
          ></el-input>
        </el-form-item>
        <p class="email">{{ $t('再确认一次') }}</p>
        <div class="input-box">
          <el-form-item prop="password2" :rules="[{ validator: validatePass }]"
            ><el-input
              :placeholder="$t('请输入密码')"
              v-model="formData.password2"
              type="password"
            ></el-input
          ></el-form-item>
        </div>
        <el-form-item
          ><button
            class="my-button"
            style="margin-top: 0.89rem; width: 33.33rem"
            @click="resetPwd"
          >
            {{ $t('重置密码') }}
          </button></el-form-item
        >
      </el-form>
    </div>
  </div>
</template>
<script>
import api from '@/api/login'
export default {
  data() {
    return {
      formData: {
        password: '',
        password2: '',
      },
      email: '',
      code: '',
    }
  },
  mounted() {
    let index = this.$route.fullPath.indexOf('?')
    if (index > -1) {
      let base64Str = this.$route.fullPath.slice(index + 1)
      if (base64Str) {
        const queryString = atob(base64Str)
        const paramsObj = {}
        queryString.split('&').forEach((pair) => {
          const [key, value] = pair.split('=')
          paramsObj[key] = decodeURIComponent(value || '')
        })
        this.$store.state.resetBy = 'email'
        this.email = paramsObj.mail
        this.code = paramsObj.code
      }
    }
  },
  methods: {
    validatePass(rule, value, callback) {
      if (value === '') {
        callback(new Error(this.$t('请再次输入密码')))
      } else if (value !== this.formData.password) {
        callback(new Error(this.$t('两次输入密码不一致!')))
      } else {
        callback()
      }
    },
    async resetPwd() {
      let hasErr = false
      this.$refs['formData'].validateField(['password', 'password2'], (err) => {
        if (err) {
          hasErr = true
          return
        }
      })
      if (!hasErr) {
        let params = {
          mobile: this.$store.state.resetPhone,
          code: this.$store.state.resetCode,
          password: this.formData.password,
        }
        let url = api.resetPwdPhone
        if (this.$store.state.resetBy == 'email') {
          url = api.resetPwdEmail
          params = {
            mail: this.email,
            code: this.code,
            newPassword: this.formData.password,
          }
        }
        let res = await this.$http.put(url, params)
        if (res && res.code == 0) {
          this.$message.success(this.$t('重置成功'))
          if (this.$store.state.resetBy == 'email') {
            this.$router.replace('/loginbyemail')
          } else {
            this.$router.replace('/login')
          }
        } else {
          this.$message.error(res.msg || this.$t('网络错误'))
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.resetpsw-wrap {
  width: 64.39rem;
  background: #f5f7fa;
  border-radius: 0.44rem;
  margin: 3.72rem auto 5.56rem 7.78rem;
  padding-top: 3.72rem;
  padding-bottom: 3.72rem;
  overflow: hidden;
  font-size: 0.6rem;
  .loginbyphone-content-wrap {
    width: 33.33rem;
    margin: 0 auto;
  }
  .title {
    font-weight: bold;
    font-size: 1.33rem;
    color: #333333;
  }
  .email {
    font-size: 0.89rem;
    color: #333333;
    margin-top: 1.33rem;
    margin-bottom: 0.39rem;
  }
  .tips {
    font-size: 0.89rem;
    color: #666666;
    line-height: 1.22rem;
    text-align: center;
    margin-top: 1rem;
    span {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .check-login-way {
    font-size: 0.89rem;
    color: #045fb2;
    line-height: 1.22rem;
    text-align: right;
    margin-top: 1rem;
    span {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .input-box {
    .input-slot {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.89rem;
      cursor: pointer;
      color: #045fb2;
    }
  }
  .check-email-button-wrap {
    width: 0;
    height: 0;
    border-top: 4.32rem solid #c4e3ff; /* 调整颜色和大小 */
    border-left: 5.56rem solid transparent;
    position: absolute;
    right: 0;
    top: 0;
    img {
      width: 2rem;
      height: 2rem;
      cursor: pointer;
      top: -3.9rem;
      left: -2.6rem;
    }
  }
  .router-box {
    font-size: 0.6rem;
    color: #425f9b;
    margin-top: 0.89rem;
    span:nth-child(2) {
      text-decoration: underline;
      color: #045fb2;
      margin-left: 0.89rem;
      cursor: pointer;
    }
    .forget-box {
      color: #045fb2;
      cursor: pointer;
      float: right;
    }
  }
}
</style>
<style lang="scss">
.resetpsw-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
  }
}
</style>
